<template>
  <div>
    <!-- 第一行 -->
    <el-row>
      <el-col :span="2.5" >
        <el-select v-model="type" placeholder="请选择商品种类" @change="changecategory()" style="width: 150px;">
          <el-option
            v-for="item in categorys"
            :key="item.id"
            :type="item.type"
            :value="item.type">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="2.5" >
        <el-select v-model="rktype1" placeholder="请选择入库类型" @change="changerktype()" style="width: 150px;">
          <el-option
            v-for="item in rkTypes"
            :key="item.id"
            :rktype1="item.rkType"
            :value="item.rkType">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="2.5" >
        <el-select v-model="rktype2" placeholder="请选择订单状态" @change="changestatus()" style="width: 150px;">
          <el-option
            v-for="item in statuss"
            :key="item.id"
            :rktype2="item.type"
            :value="item.type">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="8">
        <el-date-picker
          v-model="date"
          type="daterange"
          format="yyyy-MM-dd"
          value-format="timestamp"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']">
        </el-date-picker>
        <el-button type="primary" @click="cksearch()" icon="el-icon-search">搜索</el-button>
      </el-col>
      <el-col :span="3">
        <el-button circle icon="el-icon-delete-solid"  @click="clear()"></el-button>
        <el-button circle icon="el-icon-refresh" @click="refresh()"></el-button>
      </el-col>
    </el-row>
    <div style="height: 10px"></div>
    <el-row>
      <el-col :span="2.5">
        <el-button icon="el-icon-plus">
          <router-link to="/menu/add_rk" tag="span">
            新增出库
          </router-link>
        </el-button>
      </el-col>
      <el-col :span="2.5">
        <el-button icon="el-icon-printer">
          导出
        </el-button>
      </el-col>
      <el-col :span="1"><div> &nbsp;</div></el-col>
      <el-col :span="4">
        <el-input v-model="input" placeholder="请输入内容"></el-input>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="search" icon="el-icon-search">搜索</el-button>
      </el-col>
      <el-col :span="3">
        <el-button circle icon="el-icon-delete-solid"></el-button>
        <el-button circle icon="el-icon-refresh" @click="refresh()"></el-button>
      </el-col>
    </el-row>

<!-- 表格 -->
     <el-table
    :data="tableData"
    style="width: 100%;text-align: center">
    <el-table-column
      prop="id"
      label="序号"
      width="80">
    </el-table-column>
       <el-table-column
         prop="name"
         label="名称"
         width="180">
       </el-table-column>
    <el-table-column
      prop="ckNo"
      label="单号"
      width="250">
    </el-table-column>
    <el-table-column
      prop="custom"
      label="客户"
      width="150">
    </el-table-column>
     <el-table-column
       prop="rkType"
       label="类型"
       width="150">
     </el-table-column>
       <el-table-column
         prop="location"
         label="区域"
         width="150">
       </el-table-column>
       <el-table-column
         prop="status"
         label="状态"
         width="100">
       </el-table-column>
       <el-table-column
         prop="percenttage"
         label="成色"
         width="150">
       </el-table-column>
       <el-table-column
         prop="weight"
         label="重量"
         width="100">
       </el-table-column>
       <el-table-column
         prop="nums"
         label="数量"
         width="100">
       </el-table-column>
       <el-table-column
         prop="processingfee"
         label="克供费"
         width="100">
       </el-table-column>
       <el-table-column
         prop="makeTime"
         label="日期"
         width="180">
       </el-table-column>
  </el-table>
  <!-- 分页 -->
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="1"
    :page-sizes="[13]"
    :page-size="13"
    layout="total, sizes, prev, pager, next, jumper"
    :total=this.pageinfo.total>
  </el-pagination>
  </div>

</template>

<script>
export default {
  data() {
    return {
      input:"",
      date:['null','null'],
      tableData: [],
      pageinfo:[],
      val:'1',
      categorys:[],
      rkTypes:[],
      statuss:[],
      type:'',
      rktype1:'',
      rktype2:'',
      CKseach:{
        category:0,
        rktype:0,
        status:0,
        startdate:{},
        enddate:{},
        pn:''
      }
    }
  },
  methods:{
    search(){
      //按输入入库编号查
      //alert(this.date);
    },
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      let date=new Date();
      this.CKseach.pn=val;
      this.CKseach.startdate=date-date;
      this.CKseach.enddate=date-date;
      this.axios.post(this.baseUrl+"ckTable/selectAll",this.CKseach)
        .then(res =>{
          this.tableData=res.data.data.list
          this.pageinfo=res.data.data
        })
    },
    refresh(){
      this.handleCurrentChange(this.val)
    },
    changecategory(){
      for (const categoryKey of this.categorys) {
        if(categoryKey.type===this.type){
          this.CKseach.category=categoryKey.id;
        }
      }
    },
    changerktype(){
      for (const categoryKey of this.rkTypes) {
        if(categoryKey.rkType===this.rktype1){

          this.CKseach.rktype=categoryKey.id;
          alert(this.CKseach.rktype)
        }
      }
    },
    changestatus(){
      for (const categoryKey of this.statuss) {
        if(categoryKey.type===this.rktype2){
          this.CKseach.status=categoryKey.id;
        }
      }
    },
    cksearch(){
      let val=this.val;
      this.CKseach.startdate=this.date[0];
      this.CKseach.enddate=this.date[1];
      if(this.CKseach.startdate==null){
        let date=new Date();
        this.CKseach.startdate=date-date;
        this.CKseach.enddate=date-date;
      }
      this.CKseach.pn=val;
      console.log(this.CKseach)
      this.axios.post(this.baseUrl+"ckTable/selectAll",this.CKseach)
        .then(res =>{
          console.log(res.data.data)
          this.tableData=res.data.data.list
          this.pageinfo=res.data.data

        })
    },
    clear(){
      this.CKseach.pn=1;
      let date=new Date();
      this.date=['null','null']
      this.CKseach.startdate=date-date;
      this.CKseach.enddate=date-date;
      this.CKseach.status=0;
      this.CKseach.category=0;
      this.CKseach.rktype=0;
      this.type='';
      this.rktype1='';
      this.rktype2='';
      alert("即将清空搜索数据")
      this.axios.post(this.baseUrl+"ckTable/selectAll",this.CKseach)
        .then(res =>{
          console.log(res.data.data)
          this.tableData=res.data.data.list
          this.pageinfo=res.data.data
        })
    }


  },
  created(){
    this.handleCurrentChange(this.val);
    this.axios.get(this.baseUrl+"type/all")
      .then(res =>{
       this.categorys=res.data.data[0];
       this.rkTypes=res.data.data[1];
       this.statuss=res.data.data[2];
      })
  }
}
</script>


<style scoped>

</style>
